<!--
  @Author cj
  @Date: 2021/01/22/ 15:04
-->
<template>
  <div>
    <div class="table-menu-left">
      <slot name="tableTopMenu"></slot>
      <span v-if="option.indexCheck && option.showCheckNum" class="font-12 default-color">当前表格已选择 <span class="color-span">{{checkList.length}}</span> 项</span>
    </div>
    <div class="table-menu-right">
      <el-tooltip content="列显隐"
                  placement="top">
        <el-button class="sort-btn"
                   v-if="showColumnHandleBtn"
                   circle
                   @click="columnVisible=true"><i class="iconfont iconfunction-fill"></i></el-button>
      </el-tooltip>
    </div>
    <el-checkbox-group class="table-checkbox-group"
                       v-model="checkList">
      <el-radio-group class="table-radio-group"
                      v-model="radioRow"
                      ref="radio_group">
        <el-form ref="cellForm"
                 class="cellForm">
          <el-table size="mini"
                    stripe
                    :useVirtual="option.useVirtual"
                    :ref="tabelRef"
                    :class="option.showSummary?'summary-table':''"
                    border
                    v-loading="loading"
                    v-if="isShowTable"
                    :data="data"
                    :row-key="option.rowKey"
                    :height="option.height"
                    :max-height="option.maxHeight"
                    :show-header="option.showHeader===undefined?true:option.showHeader"
                    :highlight-current-row="option.highlightRow"
                    :row-style="option.rowStyle"
                    :cell-class-name="option.cellClassName"
                    :cell-style="option.cellStyle"
                    :header-row-class-name="option.headerRowClassName"
                    :header-row-style="option.headerRowStyle"
                    :header-cell-class-name="option.headerCellClassName"
                    :header-cell-style="option.headerCellStyle"
                    :show-summary="option.showSummary"
                    :sum-text="option.sumText"
                    :row-class-name="tableRowClassName"
                    :summary-method="summaryMethod"
                    :span-method="spanMethod"
                    @cell-mouse-enter="cellMouseEnter"
                    @cell-mouse-leave="cellMouseLeave"
                    @cell-click="cellClick"
                    @cell-dblclick="cellDblclick"
                    @row-click="rowClick"
                    @row-contextmenu="rowContextmenu"
                    @row-dblclick="rowDblclick"
                    @header-click="headerClick"
                    @header-contextmenu="headerContextmenu"
                    style="width: 100%">
            <!-- 序号+复选 -->
            <el-table-column label="序号+复选"
                             v-if="option.indexCheck"
                             :fixed="option.indexCheckFixed"
                             :width="option.indexCheckWidth"
                             type="index">
              <!-- 全选 -->
              <template slot="header"
                        slot-scope="scope">
                <div class="index-check-box"
                     @click.stop="preventBubble">
                  <span v-show="!checkList || checkList.length<1"
                        class="table-index">序号</span>
                  <label class="el-checkbox table-checked"
                         :class="{'is-checked':checkAll, 'in-block':checkList&&checkList.length>0}">
                    <span class="el-checkbox__input"
                          :class="{'is-checked':checkAll, 'is-indeterminate': checkIndeterminate}">
                      <span class="el-checkbox__inner"
                            @click.stop="handleCheckAllChange(!checkAll)"></span>
                      <input type="checkbox"
                             aria-hidden="true"
                             class="el-checkbox__original">
                    </span>
                    <span class="el-checkbox__label"></span>
                  </label>
                </div>
              </template>
              <template slot-scope="scope">
                <div class="index-check-box"
                     @click.stop="preventBubble">
                  <el-checkbox class="table-checked"
                               :disabled="scope.row.disabled"
                               :class="{'in-block':checkList && checkList.indexOf(scope.row[option.rowKey])>-1}"
                               :label="scope.row[option.rowKey]"
                               @change="handleCheckedChange(scope.row.checked, scope.row, scope.$index)"> </el-checkbox>
                  <!-- 有分页时，序号显示 -->
                  <span class="table-index"
                        v-show="!checkList || checkList.indexOf(scope.row[option.rowKey])===-1"
                        v-if="page">{{(page.current - 1)*page.size + scope.$index + 1}}</span>
                  <!-- 无分页时，序号显示 -->
                  <span class="table-index"
                        v-show="!checkList || checkList.indexOf(scope.row[option.rowKey])===-1"
                        v-else>{{scope.$index + 1}}</span>
                </div>
              </template>
            </el-table-column>
            <!-- 序号+单选 -->
            <el-table-column label="选择"
                             v-else-if="option.indexRadio"
                             :fixed="option.indexRadioFixed"
                             :width="option.indexRadioWidth"
                             type="index">
              <template slot-scope="scope">
                <div class="index-check-box"
                     @click.stop="preventBubble">
                  <el-radio class="table-checked"
                            :class="{'in-block':radioRow && radioRow===scope.row[option.rowKey]}"
                            :label="scope.row[option.rowKey]"
                            @change="handleRadioChange(scope.row, scope.$index)"> </el-radio>
                  <!-- 有分页时，序号显示 -->
                  <span class="table-index"
                        v-if="page">{{(page.current - 1)*page.size + scope.$index + 1}}</span>
                  <!-- 无分页时，序号显示 -->
                  <span class="table-index"
                        v-else>{{scope.$index + 1}}</span>
                </div>
              </template>
            </el-table-column>
            <!-- 序号 -->
            <el-table-column label="序号"
                             v-else-if="option.index"
                             :fixed="option.indexFixed===undefined?'left':option.indexFixed"
                             :width="option.indexWidth"
                             type="index">
              <template slot-scope="scope">
                <!-- 有分页时，序号显示 -->
                <span v-if="page">{{(page.current - 1)*page.size + scope.$index + 1}}</span>
                <!-- 无分页单元格可以编辑序号显示 -->
                <span v-else-if="scope.row.$cellEdit || isCanAdd"
                      style="display: flex;flex-flow: row nowarp;align-items: center;justify-content: space-between;width: 100%;">
                  <span v-if="option.isNoAdd && option.isNoDel">{{page?((page.current - 1)*page.size + scope.$index + 1):(scope.$index + 1)}}</span>

                  <el-tooltip placement="top"
                              :content="$t('common.add1')">
                    <el-button icon="el-icon-circle-plus-outline"
                               type="text"
                               circle
                               style="margin-right: 0 !important;font-size:16px"
                               v-if="!option.isNoAdd"
                               @click.stop="addRow(scope.$index)"></el-button>
                  </el-tooltip>
                  <el-tooltip placement="top"
                              :content="$t('common.delete')">
                    <el-button icon="el-icon-remove-outline"
                               type="text"
                               :disabled="tableData.length === 1 && !option.delNoDisabled"
                               circle
                               style="margin-right: 0 !important;color:red;font-size:16px"
                               v-if="!option.isNoDel"
                               @click.stop="deleteRow(scope.$index)"></el-button>
                  </el-tooltip>
                </span>
                <!-- 无分页时，序号显示 -->
                <span v-else>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <template v-for="(col_1_item, index) in showColumnsList">
              <!-- 操作列/自定义列 -->
              <slot v-if="col_1_item.slot"
                    :name="col_1_item.prop"></slot>
              <!-- 普通列 -->
              <el-table-column v-else
                               :key="index"
                               :prop="col_1_item.prop"
                               :label="col_1_item.label"
                               :min-width="col_1_item.minWidth||'100px'"
                               :width="col_1_item.width"
                               :fixed="col_1_item.fixed"
                               :formatter="col_1_item.formatter"
                               :show-overflow-tooltip="col_1_item.overflowTooltip===undefined?true:col_1_item.overflowTooltip"
                               :class-name="col_1_item.className"
                               :label-class-name="col_1_item.labelClassName"
                               header-align="left"
                               align="left">
                <!-- 表头 -->
                <template slot="header"
                          slot-scope="scope">
                  <slot v-if="col_1_item.slotColumnHeader"
                        :name="col_1_item.slotColumnHeader"></slot>
                  <template v-else-if="col_1_item.headerFilter">
                    <span v-if="col_1_item.isRequire"
                          class="table-header-isRequire">*</span>

                    <span class="header-filter-box">
                      {{col_1_item.label}}
                      <span class="sort-icon-box"
                            :class="{'in-block':sortVal===col_1_item.prop+'descending'||sortVal===col_1_item.prop+'ascending'}"
                            v-if="col_1_item.headerFilterSort">
                        <span class="sort-icon el-icon-caret-top"
                              :class="{'color-span':sortVal===col_1_item.prop+'descending'}"
                              title="降序"
                              @click="handleCommand(col_1_item.prop, index, {command: 'descending'})"></span>
                        <span class="sort-icon el-icon-caret-bottom"
                              :class="{'color-span':sortVal===col_1_item.prop+'ascending'}"
                              title="升序"
                              @click="handleCommand(col_1_item.prop, index, {command: 'ascending'})"></span>
                      </span>
                      <span class="lock-icon el-icon-unlock"
                            title="取消锁定"
                            @click="handleCommand(col_1_item.prop, index, {command: 'unLock'})"
                            v-if="col_1_item.headerFilterLock && col_1_item.fixed"></span>
                      <span class="lock-icon el-icon-lock"
                            title="锁定"
                            @click="handleCommand(col_1_item.prop, index, {command: 'lock'})"
                            v-if="col_1_item.headerFilterLock && !col_1_item.fixed"></span>
                    </span>

                    <!--<el-dropdown class="header-filter-dropdown"
                                 size="mini">
                      <span class="el-dropdown-link">
                        {{col_1_item.label}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item, filterIndex) in col_1_item.headerFilterList"
                                          :key="filterIndex"
                                          :command="item[col_1_item.headerFilterCommand]">
                          <div @click="handleCommand(col_1_item.prop, index,item)">
                            <i v-if="item.icon"
                               class="iconfont"
                               :class="item.icon"></i>{{item[col_1_item.headerFilterLabel]}}
                          </div>
                        </el-dropdown-item>
                        <el-dropdown-item command="ascending"
                                          v-if="col_1_item.headerFilterSort"
                                          :divided="col_1_item.headerFilterList && col_1_item.headerFilterList.length>0">
                          <div @click="handleCommand(col_1_item.prop, index, {command: 'ascending'})">
                            <i class="iconfont iconpaixu1"></i>升序
                          </div>
                        </el-dropdown-item>
                        <el-dropdown-item command="descending"
                                          v-if="col_1_item.headerFilterSort">
                          <div @click="handleCommand(col_1_item.prop, index, {command: 'descending'})">
                            <i class="iconfont iconpaixu2"></i>降序
                          </div>
                        </el-dropdown-item>
                        <el-dropdown-item command="lock"
                                          v-if="col_1_item.headerFilterLock && !col_1_item.fixed"
                                          divided>
                          <div @click="handleCommand(col_1_item.prop, index, {command: 'lock'})">
                            <i class="iconfont icon-lock"></i>锁定此列
                          </div>
                        </el-dropdown-item>
                        <el-dropdown-item command="lock"
                                          v-if="col_1_item.headerFilterLock && col_1_item.fixed"
                                          divided>
                          <div @click="handleCommand(col_1_item.prop, index, {command: 'unLock'})">
                            <i class="iconfont icon-unlock"></i>取消锁定
                          </div>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>-->
                  </template>
                  <template v-else>
                    <span v-if="col_1_item.isRequire"
                          class="table-header-isRequire">*</span>
                    {{col_1_item.label}}
                  </template>
                </template>
                <!-- 表体内容显示 -->
                <template slot-scope="scope">
                  <el-form-item v-if="col_1_item.cell"
                                :ref="`form_item_${col_1_item.prop}_${scope.$index}`"
                                :rules='col_1_item.rules'>
                    <template v-if="scope.row.$cellEdit">
                      <slot v-bind="{
                      row:scope.row,
                      index:scope.$index,
                      disabled:col_1_item.disabled,
                      column:col_1_item,
                      rightCell:rightCell,
                      leftCell:leftCell,
                      topCell:topCell,
                      bottomCell:bottomCell
                    }"
                            :name="col_1_item.prop"
                            v-if="col_1_item.slotCell"></slot>
                      <form-temp v-else
                                 :ref="`cell_${col_1_item.prop}`"
                                 :column="col_1_item"
                                 :dic="col_1_item.dicData"
                                 :props="col_1_item.props || {label:'label',value:'value'}"
                                 :readonly="col_1_item.readonly"
                                 :disabled="col_1_item.disabled"
                                 :clearable="vaildData(col_1_item.clearable,false)"
                                 v-model="scope.row[col_1_item.prop]"
                                 @enter="rightCell(scope.row,scope.$index,col_1_item)"
                                 @change="columnChange(index,scope.row,col_1_item)"
                                 @bottom-cell="bottomCell(scope.row,scope.$index,col_1_item)"
                                 @top-cell="topCell(scope.row,scope.$index,col_1_item)"
                                 @left-cell="leftCell(scope.row,scope.$index,col_1_item)"
                                 @right-cell="rightCell(scope.row,scope.$index,col_1_item)">
                      </form-temp>
                    </template>
                    <template v-else>
                      <slot v-if="col_1_item.slotCell"
                            :name="`${col_1_item.slotCell}`"
                            v-bind="{
                      row:scope.row,
                      index:scope.$index
                    }"></slot>
                      <template v-else>{{handleDetail(scope.row,col_1_item)}}</template>
                    </template>
                  </el-form-item>
                  <slot v-else-if="col_1_item.slotCell"
                        :name="col_1_item.slotCell"
                        :index="scope.$index"
                        :row="scope.row"></slot>
                  <template v-else-if="col_1_item.formatter">
                    {{col_1_item.formatter(scope.row, scope.column, scope.row[col_1_item.prop], scope.$index)}}
                  </template>
                  <template v-else>
                    {{scope.row[col_1_item.prop]}}
                  </template>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </el-form>
        <div class="pagination-box">
          <!-- 是否调用分页 -->
          <el-pagination v-if="page && page.total>0"
                         background
                         :layout="page.layout?page.layout:'total, sizes, prev, pager, next, jumper'"
                         :page-size="page.size"
                         :current-page="page.current"
                         :total="page.total"
                         :page-sizes="page.pageSizes"
                         @size-change="sizeChange"
                         @current-change="currentChange">
          </el-pagination>
        </div>
      </el-radio-group>
    </el-checkbox-group>

    <!-- 显示/隐藏列 -->
    <column-transfer :visible="columnVisible"
                     :dataList="columns"
                     :choseDataList="showColumnsList"
                     @close="transferClose"></column-transfer>
  </div>
</template>

<script>
import { deepClone } from "../../../util/util";
import ColumnTransfer from './columnTransfer'
import formTemp from '../form'
import { detail } from "../core/detail";
import mixins from '../util/moveCell'

export default {
  name: "index",
  components: { ColumnTransfer, formTemp },
  mixins: [mixins],
  props: {
    tabelRef: {
      type: String,
      default: 'elTableDefaultRef'
    },
    tableData: {
      type: Array,
      default: []
    },
    loading: {
      type: Boolean,
      default: false,
    },
    // 默认选中的复选值
    defaultCheckedList: {
      type: Array,
      default: () => []
    },
    rowAdd: {
      type: Function,
      remark: '开启行编辑后-列新增方法'
    },
    rowDelete: {
      type: Function,
      remark: '开启行编辑后-列删除方法'
    },
    isCanAdd: {
      type: Boolean,
      default: false,
      remark: '是否开启行新增，删除'
    },
    option: {
      type: Object,
      default: () => {
        return {
          // 序号
          index: false,
          indexFixed: 'left',
          indexWidth: 50,
          // 序号+复选
          indexCheck: false,
          indexCheckFixed: 'left',
          indexCheckWidth: 50,
          // 序号+单选
          indexRadio: false,
          indexRadioFixed: 'left',
          indexRadioWidth: 50,
          // 复选/单选key值
          rowKey: 'id',
          // 高度
          height: 'auto',
          maxHeight: 'auto'
        }
      }
    },
    columns: {
      type: Array,
      default: []
    },
    page: {
      type: Object,
      default: null
    },
    showColumnHandleBtn: {
      type: Boolean,
      default: true
    },
  },
  watch: {
    tableData: {
      deep: true,
      handler () {
        this.sortVal = ''
        this.radioRow = ''
        this.$set(this, 'data', this.tableData)
        // 回显选中状态
        this.getPageCheckStatus()
      }
    },
    // 监听 - 复选框刷新
    defaultCheckedList () {
      if (!this.defaultCheckedList || this.defaultCheckedList.length < 1) {
        this.checkList = []
        this.checkAll = false
        this.checkIndeterminate = false
      }
    },
    columns: {
      deep: true,
      handler () {
        this.showColumnsList = this.columns || []
        this.isShowTable = false
        this.$nextTick(() => {
          this.isShowTable = true
        })
      }
    }
  },
  // computed: {
  //   showColumnsList: {
  //     get () {
  //       return this.columns || []
  //     },
  //     set (value) {
  //       // console.log(value);
  //     }
  //   }
  // },
  data () {
    return {
      isShowTable: true,
      showColumnsList: [],
      data: this.tableData,
      sortVal: '', // 排序
      // 复选
      checkAll: false,
      checkIndeterminate: false,
      checkList: this.defaultCheckedList,
      // 单选
      radioRow: '',
      // 表格列显隐（弹窗）操作
      columnVisible: false,
      count: {}
    }
  },
  mounted () {
    this.showColumnsList = this.columns || []
    // 回显选中数据
    if (this.defaultCheckedList.length > 0) {
      // 判断显示全选、半全选
      if (this.checkList.length === this.data.length) {
        this.checkAll = true
        this.checkIndeterminate = false
      } else if (this.checkList.length === 0) {
        this.checkAll = false
        this.checkIndeterminate = false
      } else {
        this.checkAll = false
        this.checkIndeterminate = true
      }
    }
    // 显示列
    this.$refs.radio_group.handleKeydown = () => { }
    window.document.addEventListener('click', this.windowClick)
    window.document.addEventListener('keydown', this.windowKeyDown)
  },
  beforeDestroy () {
    window.document.removeEventListener('click', this.windowClick)
    window.document.removeEventListener('keydown', this.windowKeyDown)
  },
  methods: {
    windowClick () {
      this.tableData.some(res => {
        if (res.$cellEdit) this.$set(res, '$cellEdit', false)
      })
    },
    windowKeyDown (e) {
      if (e.keyCode === 9) {
        e.preventDefault()
        e.returnValue = false
      }
    },
    // 表头筛选
    handleCommand (columnName, columnIndex, data) {
      if (data.command === 'lock') {
        this.showColumnsList[columnIndex].fixed = true
        for (let i = 0; i < this.columns.length; i++) {
          if (this.showColumnsList[columnIndex].prop === this.columns[i].prop) {
            this.columns[i].fixed = true
            break
          }
        }
        // 重载表格
        this.isShowTable = false
        this.$nextTick(() => {
          this.isShowTable = true
          // 固定排序
          if(this.sortVal && this.sortVal.indexOf(columnName)>-1){
            let command = this.sortVal.replace(columnName,'')
            this.$nextTick(() => {
              this.$refs[this.tabelRef].sort(columnName, command);
            })
          }
        })
      } else if (data.command === 'unLock') {
        this.showColumnsList[columnIndex].fixed = false
        for (let i = 0; i < this.columns.length; i++) {
          if (this.showColumnsList[columnIndex].prop === this.columns[i].prop) {
            this.columns[i].fixed = false
            break
          }
        }
        // 重载表格
        this.isShowTable = false
        this.$nextTick(() => {
          this.isShowTable = true
          // 固定排序
          if(this.sortVal && this.sortVal.indexOf(columnName)>-1){
            let command = this.sortVal.replace(columnName,'')
            this.$nextTick(() => {
              this.$refs[this.tabelRef].sort(columnName, command);
            })
          }
        })
      } else if (data.command === "ascending" || data.command === "descending") {
        this.sortVal = columnName + data.command
        this.$refs[this.tabelRef].sort(columnName, data.command);
      } else {
        this.$emit('handleColumnFilter', columnName, columnIndex, data)
      }
    },
    preventBubble () { throw "check" },// 阻止冒泡
    /** 复选 **/
    // 全选/取消全选-复选框
    handleCheckAllChange (val) {
      // this.checkList = []
      this.checkAll = val
      this.checkIndeterminate = false
      // 全选数据
      for (let i = 0, len = this.data.length; i < len; i++) {
        if (val) {
          if (!this.data[i].checked && !this.data[i].disabled) {
            this.checkList.push(this.data[i][this.option.rowKey])
          }
        } else {
          this.checkList.splice(this.checkList.indexOf(this.data[i][this.option.rowKey]), 1)
        }
        this.data[i].checked = val
      }
      this.data = deepClone(this.data)
      this.$emit('handleChecked', true, this.checkList, null, null, val)
    },
    // 复选框-选择
    handleCheckedChange (isChecked, row, index) {
      row.checked = !row.checked
      // 判断显示全选、半全选
      /*if (this.checkList.length === this.data.length) {
        this.checkAll = true
        this.checkIndeterminate = false
      } else if (this.checkList.length === 0) {
        this.checkAll = false
        this.checkIndeterminate = false
      } else {
        this.checkAll = false
        this.checkIndeterminate = true
      }*/
      this.getPageCheckStatus()
      this.$emit('handleChecked', false, this.checkList, row, index, row.checked)
    },
    // 判断当前页是否全/半选
    getPageCheckStatus () {
      let checkPageList = [] // 当前页选中的数据
      if (this.checkList.length < 1 || this.data.length<1) {
        this.checkAll = false
        this.checkIndeterminate = false
        return
      }
      for (let i = 0, len = this.data.length; i < len; i++) {
        if (this.checkList.indexOf(this.data[i][this.option.rowKey]) > -1) {
          this.data[i].checked = true
          checkPageList.push(this.data[i][this.option.rowKey])
        } else {
          this.data[i].checked = false
        }
      }
      // 显示本页选中状态
      if (checkPageList.length === this.data.length) {
        this.checkAll = true
        this.checkIndeterminate = false
      } else if (checkPageList.length === 0) {
        this.checkAll = false
        this.checkIndeterminate = false
      } else {
        this.checkAll = false
        this.checkIndeterminate = true
      }
    },
    // 获取选中的数据
    getCheckData () {
      return this.checkList
    },
    /** 单选 **/
    handleRadioChange (row, index) {
      this.$emit('handleRadio', row, index)
    },
    /** change **/
    columnChange (index, row, column) {
      if (this.validatenull(this.count[column.prop])) this.count[column.prop] = 0
      this.count[column.prop] = this.count[column.prop] + 1;
      if (column.cascader) this.handleChange(index, row)
      if (this.count[column.prop] % 3 === 0 && typeof column.change === 'function' && column.cell === true) {
        column.change({ row, column, index: row.$index, value: row[column.prop] })
      }
    },
    // 详情
    handleDetail (row, column) {
      let result = row[column.prop];
      let DIC = column.dicData
      result = detail(row, column, this.tableOption, DIC);
      if (!this.validatenull(DIC)) {
        row["$" + column.prop] = result;
      }
      return result;
    },
    addRow (index) {
      if (this.rowAdd) this.rowAdd(index)
      else this.data.splice(index + 1, 0, { $index: index + 1 })
    },
    deleteRow (index) {
      if (this.rowDelete) this.rowDelete(index)
      else this.data.splice(index, 1)
    },
    // class
    tableRowClassName ({ row, rowIndex }) {
      let rowClass = ''
      if (this.option.rowClassName) {
        rowClass = this.option.rowClassName({ row, rowIndex })
      }
      if (this.checkList.indexOf(row[this.option.rowKey]) > -1 || this.radioRow === row[this.option.rowKey]) {
        return (rowClass + ' table-row-checked')
      } else {
        return rowClass
      }
    },
    // 合计
    summaryMethod ({ columns, data }) {
      if (this.option.summaryMethod) {
        return this.option.summaryMethod({ columns, data })
        return
      }
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.option.sumText || '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += '';
        } else {
          sums[index] = '';
        }
      });

      return sums;


      // this.$emit('summaryMethod', columns, data)
    },
    // 合并行或列
    spanMethod ({ row, column, rowIndex, columnIndex }) {
      this.$emit('spanMethod', row, column, rowIndex, columnIndex)
    },
    // 单元格移入移出
    cellMouseEnter (row, column, cell, event) {
      this.$emit('cellMouseEnter', row, column, cell, event)
    },
    cellMouseLeave (row, column, cell, event) {
      this.$emit('cellMouseLeave', row, column, cell, event)
    },
    // 当某个单元格被点击时
    cellClick (row, column, cell, event) {
      event.stopPropagation()
      // 判断是否开启了编辑
      if(row.noEdit){
        return
      }
      if (this.option.isEdit) {
        let i = 0
        this.tableData.some((res, index) => {
          const flag = JSON.stringify(res) === JSON.stringify(row)
          if (flag) i = index
          this.$set(res, '$cellEdit', flag)
        })
        this.moveCell(i, this.showColumnsList.filter(res => res.label + res.prop === column.label + column.property)[0])
      }
      this.$emit('cellClick', row, column, cell, event)
    },
    // 当某个单元格被双击时
    cellDblclick (row, column, cell, event) {
      this.$emit('cellDblclick', row, column, cell, event)
    },
    // 行点击
    rowClick (row, column, event) {
      // 判断点击行是否联动选择复选框
      if (!this.option.clickRowNoCheck && !row.disabled) {
        if (this.option.indexCheck) {
          // 有复选框-行点击选中/取消选中
          if (this.checkList.indexOf(row[this.option.rowKey]) > -1) {
            this.checkList.splice(this.checkList.indexOf(row[this.option.rowKey]), 1)
          } else {
            this.checkList.push(row[this.option.rowKey])
          }
          // 全选/半全选标记
          this.handleCheckedChange(row.checked, row)
        } else if (this.option.indexRadio) {
          this.radioRow = row[this.option.rowKey]
          this.handleRadioChange(row)
        }
      }
      //
      this.$emit('rowClick', row, column, event)
    },
    // 行双击
    rowDblclick (row, column, event) {
      this.$emit('rowDblclick', row, column, event)
    },
    // 行被鼠标右键点击时
    rowContextmenu (row, column, event) {
      this.$emit('rowContextmenu', row, column, event)
    },
    // 当某一列的表头被点击时
    headerClick (column, event) {
      this.$emit('rowContextmenu', column, event)
    },
    // 当某一列的表头被鼠标右键点击时
    headerContextmenu (column, event) {
      this.$emit('headerContextmenu', column, event)
    },

    // 翻页
    sizeChange (val) {
      this.$emit('sizeChange', val)
    },
    currentChange (val) {
      this.$emit('currentChange', val)
    },
    // 显示/隐藏列
    transferClose (data) {
      if (data) {
        this.showColumnsList = deepClone(data)
        // 重载表格
        this.isShowTable = false
        this.$nextTick(() => {
          this.isShowTable = true
        })
      }
      this.columnVisible = false
    },
  }
}
</script>

<style lang="scss">
.table-menu-left {
  width: calc(100% - 35px);
  float: left;
}
.table-menu-right {
  width: 30px;
  float: right;
  .sort-btn {
    margin: 0 0 10px 0;
  }
}
.table-checkbox-group,
.table-radio-group {
  width: 100%;
}
.el-table__row {
  td:first-child {
    padding: 0;
  }
}
/* 表头下拉筛选 */
.header-filter-dropdown {
  &.el-dropdown {
    cursor: pointer;
    line-height: 17px;
    padding: 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
  }
}
.header-filter-box {
  .sort-icon-box {
    position: relative;
    margin-right: 12px;
    display: none;
    .sort-icon {
      cursor: pointer;
      width: 0;
      height: 0;
      border: 5px solid transparent;
      position: absolute;
      left: -7px;
      font-size: 14px;
      /*color: #CCCCCC;*/
      &:hover {
        /*font-weight: bold;*/
        color: #606266;
      }
      &.el-icon-caret-top {
        top: -21px;
      }
      &.el-icon-caret-bottom {
        bottom: 3px;
      }
    }
  }
  .lock-icon {
    font-size: 14px;
    cursor: pointer;
    display: none;
    &:hover {
      font-weight: bold;
    }
  }
  &:hover {
    .sort-icon-box,
    .lock-icon {
      display: inline-block;
    }
  }
}
/* 复选框 */
.table-checked {
  .el-radio__label,
  .el-checkbox__label {
    display: none;
  }
}
/* 序号+复选/单选框 */
.index-check-box {
  &:hover {
    .table-checked {
      display: inline-block;
    }
    .table-index {
      display: none;
    }
  }
  .table-checked {
    display: none;
  }
  .table-index {
    display: inline-block;
  }
}
.table-row-checked {
  td {
    background-color: #eff5ff !important;
  }
}
/* 必填标志 */
.table-header-isRequire {
  color: red;
  font-size: 20px !important;
  margin-right: 1px;
  vertical-align: middle;
}
/* 分页样式 */
.pagination-box {
  text-align: right;
  margin-top: 10px;
  .el-pagination__jump {
    margin-left: 7px !important;
  }
  .el-pagination button,
  .el-pagination span:not([class*="suffix"]) {
    font-size: 12px;
  }
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    margin: 0 3px;
  }
  .el-pagination__sizes .el-input {
    width: 85px !important;
  }
  .el-pagination__sizes {
    margin-right: 5px;
  }
  .el-pagination__sizes .el-input .el-input__inner {
    font-size: 12px;
    padding: 0 5px;
  }
}
.cellForm {
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
</style>
